<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">

    <link rel="stylesheet" href="__PUBLIC__/Static/css/datetimepicker.min.css">

    <script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="__PUBLIC__/Static/js/datetimepicker.min.js"></script>
    <script src="__PUBLIC__/Static/js/datetimepicker.zh-CN.js"></script>

    <style>
        .highlight {
            background: #ffff00;
            color: #000000;
        }

        .table>tbody>tr>td,
        .table>tbody>tr>th,
        .table>tfoot>tr>td,
        .table>tfoot>tr>th,
        .table>thead>tr>td,
        .table>thead>tr>th {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            word-wrap: break-word;
        }

        .pagination a,
        .pagination span {
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            color: #337ab7;
            text-decoration: none;
            background-color: #fff;
            border: 1px solid #ddd;
        }


        .pagination span {
            margin-left: 0;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }

        .pagination a:last-child {
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
        }
        .modal-body p{word-break: break-all;}
        .white-space-initial>td{
            white-space:initial !important;
        }
        .container{
            width: 80%;
            min-width: 1140px;
        }
    </style>
</head>

<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                    aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">采集数据</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <form class="navbar-form navbar-left" method="GET" action="{:U('lst')}">
                <div class="form-group">
                    <input type="text" name="keyword" class="form-control" placeholder="关键字">
                </div>
                <div class="form-group">
                    <input size="16" type="text" value="" class="form_datetime form-control" name="date" placeholder="选择日期">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
        </div>
    </div>
</nav>
<div class="container">
    <ol class="breadcrumb">
        <li><a href="#">采集数据</a>({$count})</li>
    </ol>
    <div class="table-responsive">
        <table class="table table-hover" style="table-layout: fixed;">
            <thead>
            <tr>
                <th width="5%">id</th>
                <th width="10%">标题</th>
                <th width="15%">描述</th>
                <th width="15%">关键字</th>
                <th width="15%">链接地址</th>
                <th width="15%">refer</th>
                <th width="10%">数量</th>
                <th width="10%">哈希值</th>
                <th width="10%">采集时间</th>
            </tr>
            </thead>
            <tbody>
            <volist name="lists" id="list">
                <tr>
                    <td width="5%">{$list.id}</td>
                    <td width="10%" date-id="title">{$list.title}</td>
                    <td width="15%" date-id="description">{$list.description}</td>
                    <td width="15%" date-id="keywords">{$list.keywords}</td>
                    <td width="15%" date-id="url">{$list.url}</td>
                    <td width="15%" date-id="refer">{$list.refer}</td>
                    <td width="10%" date-id="num">{$list.num}</td>
                    <td width="10%" date-id="hash_url">{$list.hash_url}</td>
                    <td width="10%" date-id="createtime">{$list.createtime}</td>
                </tr>
            </volist>
            </tbody>
        </table>
    </div>

    <nav aria-label="Page navigation">
        <ul class="pagination">
            {$page}
        </ul>
    </nav>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">详细信息</h4>
            </div>
            <div class="modal-body">
                <address>
                    <strong>网站标题</strong><br>
                    <p id="title"></p>
                </address>
                <address>
                    <strong>网站描述</strong><br>
                    <p id="description"></p>
                </address>
                <address>
                    <strong>网站关键字</strong><br>
                    <p id="keywords"></p>
                </address>
                <address>
                    <strong>网站链接地址</strong><br>
                    <p id="url"></p>
                </address>
                <address>
                    <strong>refer</strong><br>
                    <p id="refer"></p>
                </address>
                <address>
                    <strong>采集时间</strong><br>
                    <p id="createtime"></p>
                </address>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<div style="display: none" id="gjzkey">{$keyword}</div>
</body>

<script>
    (function () {
        var keyword = $("#gjzkey").html();
        if (keyword != "") {
            var regExp = new RegExp(keyword, 'g')
            $("td").each(function () {
                var html = $(this).html();
                var newHtml = html.replace(regExp, '<span class="highlight">' + keyword + '</span>');
                $(this).html(newHtml);
            })
        }

        $(".table>tbody").on("click", "tr", function (e) {
            e.stopPropagation();
            var self = this;
            console.log(this);
            if($(self).hasClass("white-space-initial")){
                $(self).removeClass("white-space-initial");
            }else{
                $(self).addClass("white-space-initial");
            }
        });
        $(".table>tbody>tr").on("click", ".zkgb", function (e) {
            e.stopPropagation();
            $(this).prevAll("td").each(function(){
                var id = $(this).attr("date-id");
                $("#"+id).html($(this).html());
            })
            $('#myModal').modal('show')
        })

    })()
    $(".form_datetime").datetimepicker({
        format: 'yyyy-mm-dd',
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,});
</script>

</html>